home *** CD-ROM | disk | FTP | other *** search
/ Dynamic HTML Construction Kit / Dynamic HTML Construction Kit.iso / source_code / dhtmlunl / dhtml.exe / CD Content / Chap12 / dun12_6.txt < prev    next >
Encoding:
Text File  |  1997-12-18  |  3.9 KB  |  188 lines
  1. <HTML>
  2.  
  3. <HEAD>
  4.  
  5. <TITLE>card file</TITLE>
  6.  
  7. </HEAD>
  8.  
  9.  
  10.  
  11. <SCRIPT LANGUAGE="JavaScript">
  12.  
  13.  
  14.  
  15. var L=new layerTool();
  16.  
  17. function layerTool()
  18.  
  19.     {
  20.  
  21.     if (navigator.appName=="Netscape")
  22.  
  23.         this.layerProp=navProp;
  24.  
  25.     else
  26.  
  27.         this.layerProp=exProp;
  28.  
  29.     }
  30.  
  31. function exProp()
  32.  
  33.     {
  34.  
  35.     return document.all[arguments[arguments.length-1]].style;
  36.  
  37.     }
  38.  
  39. function navProp()
  40.  
  41.     {
  42.  
  43.     retVal="";
  44.  
  45.     for (var x=0;x<arguments.length;x++)
  46.  
  47.         {
  48.  
  49.         retVal+="document.layers[\'"+arguments[x]+"\']";
  50.  
  51.         if (x!=arguments.length-1)
  52.  
  53.             retVal+=".";
  54.  
  55.         }
  56.  
  57.     return eval(retVal);
  58.  
  59.     }
  60.  
  61. function layerObject(layerID,z)
  62.  
  63.     {
  64.  
  65.     this.layerID=layerID;
  66.  
  67.     this.depth=z;
  68.  
  69.     this.oldDepth=z;
  70.  
  71.     this.draw=drawLayer;
  72.  
  73.     this.setZorder=setZorder;
  74.  
  75.     }
  76.  
  77. function setZorder(z)
  78.  
  79.     {
  80.  
  81.     this.depth=z;
  82.  
  83.     }
  84.  
  85. function drawLayer()
  86.  
  87.     {
  88.  
  89.     L.layerProp(this.layerID).zIndex=this.depth;
  90.  
  91.     }
  92.  
  93. function noteManager()
  94.  
  95.     {
  96.  
  97.     this.LayerList=new Array();
  98.  
  99.     this.add=addLayer;
  100.  
  101.     this.select=select;
  102.  
  103.     }
  104.  
  105. function addLayer(layerObject)
  106.  
  107.     {
  108.  
  109.     this.LayerList[this.LayerList.length]=layerObject;
  110.  
  111.     }
  112.  
  113. function select(LayerName)
  114.  
  115.     {
  116.  
  117.     for (x=0;x<this.LayerList.length;x++)
  118.  
  119.         {
  120.  
  121.         if (this.LayerList[x].layerID==LayerName)
  122.  
  123.             {
  124.  
  125.             if (this.LayerList[x].depth==100)
  126.  
  127.                 {
  128.  
  129.                 this.LayerList[x].setZorder(this.LayerList[x].oldDepth);
  130.  
  131.                 }
  132.  
  133.             else
  134.  
  135.                 {
  136.  
  137.                 this.LayerList[x].setZorder(100);
  138.  
  139.                 }
  140.  
  141.             }
  142.  
  143.         else
  144.  
  145.             {
  146.  
  147.             this.LayerList[x].setZorder(this.LayerList[x].oldDepth);
  148.  
  149.             }
  150.  
  151.         this.LayerList[x].draw();
  152.  
  153.         }
  154.  
  155.     }
  156.  
  157. function init()
  158.  
  159.     {
  160.  
  161.     tm=new noteManager();
  162.  
  163.     for (x=1;x<=5;x++)
  164.  
  165.         {
  166.  
  167.         tm.add(new layerObject("note"+x,x));
  168.  
  169.         }
  170.  
  171.     }
  172.  
  173. </SCRIPT>
  174.  
  175. <STYLE TYPE="text/css">
  176.  
  177. #note1{
  178.  
  179.     TOP: 100px;
  180.  
  181.     Z-ORDER: 1
  182.  
  183.     }
  184.  
  185. #note2{
  186.  
  187.     TOP: 130px;
  188.  
  189.     LEFT: 60px;
  190.  
  191.     Z-ORDER: 2
  192.  
  193.     }
  194.  
  195. #note3{
  196.  
  197.     TOP: 160px;
  198.  
  199.     LEFT: 110px;
  200.  
  201.     Z-ORDER: 3
  202.  
  203.     }
  204.  
  205. #note4{
  206.  
  207.     TOP: 190px;
  208.  
  209.     LEFT: 160px;
  210.  
  211.     Z-ORDER: 4
  212.  
  213.     }
  214.  
  215. #note5{
  216.  
  217.     TOP: 220px;
  218.  
  219.     LEFT: 210px;
  220.  
  221.     Z-ORDER: 5
  222.  
  223.     }
  224.  
  225.  
  226.  
  227. .shuffleClass{
  228.  
  229.     POSITION: absolute;
  230.  
  231.     BACKGROUND: green;
  232.  
  233.     VISIBILITY: visible;
  234.  
  235.     LEFT: 10px;
  236.  
  237.     WIDTH:150px
  238.  
  239.     }
  240.  
  241. ink, A:visited, A:active {
  242.  
  243.     COLOR:blue;
  244.  
  245.     FONT-WEIGHT:bold;
  246.  
  247.     FONT-FAMILY: sans-serif;
  248.  
  249.     TEXT-DECORATION: none
  250.  
  251.     }
  252.  
  253.  
  254.  
  255. </STYLE>
  256.  
  257. <BODY BGCOLOR="#000000" ONLOAD="init()">
  258.  
  259.  
  260.  
  261. <DIV ID="note1" CLASS="shuffleClass">
  262.  
  263. <TABLE HEIGHT=200 WIDTH=150 BGCOLOR=GREEN CELLPADDING=10 BORDER=1>
  264.  
  265. <TR><TD VALIGN=TOP>
  266.  
  267. <A HREF="JavaScript:tm.select('note1');">About Us</A>
  268.  
  269. <P>
  270.  
  271. links and information
  272.  
  273. </P>
  274.  
  275. </TD></TR>
  276.  
  277. </TABLE>
  278.  
  279. </DIV>
  280.  
  281.  
  282.  
  283. <DIV ID="note2" CLASS="shuffleClass">
  284.  
  285. <TABLE HEIGHT=200 WIDTH=150 BGCOLOR=GREEN CELLPADDING=10 BORDER=1>
  286.  
  287. <TR><TD VALIGN=TOP>
  288.  
  289. <A HREF="JavaScript:tm.select('note2');">Clients</A>
  290.  
  291. <P>
  292.  
  293. links and information
  294.  
  295. </P>
  296.  
  297. </TD></TR>
  298.  
  299. </TABLE>
  300.  
  301. </DIV>
  302.  
  303.  
  304.  
  305. <DIV ID="note3" CLASS="shuffleClass">
  306.  
  307. <TABLE HEIGHT=200 WIDTH=150 BGCOLOR=GREEN CELLPADDING=10 BORDER=1>
  308.  
  309. <TR><TD VALIGN=TOP>
  310.  
  311. <A HREF="JavaScript:tm.select('note3');">Freebies</A>
  312.  
  313. <P>
  314.  
  315. links and information
  316.  
  317. </P>
  318.  
  319. </TD></TR>
  320.  
  321. </TABLE>
  322.  
  323. </DIV>
  324.  
  325.  
  326.  
  327. <DIV ID="note4" CLASS="shuffleClass">
  328.  
  329. <TABLE HEIGHT=200 WIDTH=150 BGCOLOR=GREEN CELLPADDING=10 BORDER=1>
  330.  
  331. <TR><TD VALIGN=TOP>
  332.  
  333. <A HREF="JavaScript:tm.select('note4');">Links</A>
  334.  
  335. <P>
  336.  
  337. links and information
  338.  
  339. </P>
  340.  
  341. </TD></TR>
  342.  
  343. </TABLE>
  344.  
  345. </DIV>
  346.  
  347.  
  348.  
  349. <DIV ID="note5" CLASS="shuffleClass">
  350.  
  351. <TABLE HEIGHT=200 WIDTH=150 BGCOLOR=GREEN CELLPADDING=10 BORDER=1>
  352.  
  353. <TR><TD VALIGN=TOP>
  354.  
  355. <A HREF="JavaScript:tm.select('note1');">Welcome</A>
  356.  
  357. <P>
  358.  
  359. links and information
  360.  
  361. </P>
  362.  
  363. </TD></TR>
  364.  
  365. </TABLE>
  366.  
  367. </DIV>
  368.  
  369.  
  370.  
  371. </BODY>
  372.  
  373. </HTML>
  374.  
  375.